<template>
  <div class="menu-box">
    <p>个人中心</p>
    <div
      class="menu-box-item"
      v-for="(item, index) in menuList"
      :key="item.id"
      @click="routerChange(item, index)"
      :class="selIndex == item.id ? 'menu-box-item-yes' : 'menu-box-item-no'"
    >
      <div
        class="menu-text"
        :class="selIndex == item.id ? 'menu-sel-yes' : 'menu-sel-no'"
      >
        {{ item.name }}
      </div>
    </div>
    <p>账号与安全中心</p>
    <div
      class="menu-box-item"
      v-for="(item, index) in menuList1"
      :key="item.id"
      @click="routerChange(item, index)"
      :class="selIndex == item.id ? 'menu-box-item-yes' : 'menu-box-item-no'"
    >
      <div
        class="menu-text"
        :class="selIndex == item.id ? 'menu-sel-yes' : 'menu-sel-no'"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "set",
  props: {
    navNum: {},
  },
  data() {
    return {
      menuList: [
        {
          name: "我的钱包",
          url: "/Centre",
          id: 1,
        },
        {
          name: "我的简历",
          url: "/Centre/cenJane",
          id: 2,
        },
        {
          name: "我的收藏",
          url: "/Centre/cenCollect",
          id: 3,
        },
        {
          name: "我的订单",
          url: "/Centre/cenOrder",
          id: 4,
        },
        {
          name: "我的消息",
          url: "/Centre/cenMessage",
          id: 5,
        },
        {
          name: "我的邀请",
          url: "/Centre/cenInvite",
          id: 6,
        },
        {
          name: "我的发票",
          url: "/Centre/cenInvoice",
          id: 7,
        },
        {
          name: "投诉管理",
          url: "/Centre/cenPlain",
          id: 8,
        },
      ],
      menuList1: [
        {
          name: "账号管理",
          url: "/Centre/cenAccount",
          id: 9,
        },
        {
          name: "身份验证",
          url: "/Centre/cenStanding",
          id: 10,
        },
        
      ],
      selIndex: 1,
    };
  },
  watch: {},
  mounted() {
    let currentUrl = this.$route.path;
    if (currentUrl == "/Centre") {
      this.selIndex = 1;
    } else if (currentUrl == "/Centre/cenJane") {
      this.selIndex = 2;
    } else if (currentUrl == "/Centre/cenCollect") {
      this.selIndex = 3;
    } else if (currentUrl == "/Centre/cenOrder") {
      this.selIndex = 4;
    } else if (currentUrl == "/Centre/cenMessage") {
      this.selIndex = 5;
    } else if (currentUrl == "/Centre/cenInvite") {
      this.selIndex = 6;
    }else if (currentUrl == "/Centre/cenInvoice") {
      this.selIndex = 7;
    }else if (currentUrl == "/Centre/cenPlain") {
      this.selIndex = 8;
    }else if (currentUrl == "/Centre/cenAccount") {
      this.selIndex = 9;
    }else if (currentUrl == "/Centre/cenStanding") {
      this.selIndex = 10;
    }
  },
  methods: {
    routerChange(val, index) {
      this.selIndex = val.id;
      this.$router.push(val.url);
    },
  },
};
</script>
<style lang="less" scoped>
.menu-box {
  display: flex;
  flex-direction: column;
  align-items: left;
  height: 100%;
  border-radius: 10px;
  padding-bottom: 20px;
  p{
    font-size: 18px;
    font-weight: 600;
    width: 85%;
    margin: auto;
    margin-top: 20px;
  }
  .menu-box-item {
    width: 85%;
    margin: auto;
    text-indent: 18px;
    .menu-text {
      cursor: default;
      font-size: 17px;
      font-weight: 600;
    }
    .menu-sel-yes {
      color: #3B96F8;
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      background-color: #E9F3FF;
      border-radius: 10px;
      border: 1px solid #D6D6D6;
      margin-top: 10px;
    }
    .menu-sel-no {
      line-height: 30px;
      color: #1c1c1c;
      font-size: 17px;
      margin-top: 10px;
      // margin-left: 10px;
    }
    .menu-sel-no:hover {
      color: #3492f8;
    }
  }
}
</style>
